import { use, useState } from "react";

function App() {
  const [obj,setObj]=useState({
    x:0,
    y:0,
    w:100,
    h:100
  })

  function mouseMove(e){

    //鼠标移动时候修改xy会导致wh的数据丢失，因为赋值的对象缺少wh
    //如果写死会浪费资源，还是有wh
    setObj({
      ...obj,
      x:e.clientX,
      y:e.clientY
    })
    //将4个属性写出两个对象，最优解是useReducer的第三个参数传入初始化函数
  }
  return (
    <div onMouseMove={mouseMove} className="App" style={{width:"100vw",height:"100vh",backgroundColor:"#6cf"}}>
      <h1>
        x:{obj.x}------y:{obj.y},
        w:{obj.w}------h:{obj.h}

      </h1>
      

    </div>
  );
}

export default App;
